<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus';
import { adds, getAll, remove, update } from '../../api/category';



const name = ref('')
const add = async () => {
    if (!name.value) return ElMessage.error('请输入分类名')
    await adds({ name: name.value })
    name.value = ''
    getAllc()
    ElMessage.success('添加成功')
}

type Row = {
    name: string,
    id: number
}

const tableData = ref<Row>()

const del = async (index: number, row: Row) => {
    console.log(index, row)
    await remove(row.id)
    getAllc()
    ElMessage.success('删除成功')
}

const getAllc = async () => {
    await getAll().then(res => {
        tableData.value = res.data
    })
}

const dialogFormVisible = ref(false)
const form = ref({ name: '' })

const cancel = () => {
    dialogFormVisible.value = false
    form.value.name = ''
}

const show = async (index: number, row: Row) => {
    console.log(index, row)
    dialogFormVisible.value = true
    currentId.value = row.id
    form.value.name = row.name
}

const currentId = ref(0)
const upName = async (index: number, row: Row) => {
    console.log(index, row)
    if (!form.value.name) return ElMessage.error('请输入分类名')
    await update(currentId.value, { name: form.value.name })
    getAllc()
    ElMessage.success('修改成功')
    dialogFormVisible.value = false
}

onMounted(async () => {
    getAllc()
})

</script>

<template>
    <div>
        <div class="mt-4 p-5">
            <el-input v-model="name" style="max-width: 600px" placeholder="请输入分类名" class="input-with-select">

            </el-input>
            <el-button class="ml-4" type="primary" @click="add">添加</el-button>
        </div>


        <div class="table p-5 w-full">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="id" width="180" />
                <el-table-column prop="name" label="name" width="180" />

                <el-table-column fixed="right" label="操作" width="200">
                    <template #default="scope">
                        <el-button link type="primary" size="" @click="show(scope.$index, scope.row)">编辑</el-button>
                        <el-button link type="danger" size="small" @click="del(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog v-model="dialogFormVisible" title="编辑分类" width="500">
            <el-form :model="form.name">
                <el-form-item label="分类名" label-width="140px">
                    <el-input v-model="form.name" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" @click="upName">
                        更新
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>